<template>

  <div class=" home_wrap">
    <div class="animate__animated animate__backInLeft">
      <div class="head_tags">
        <el-card>
          <el-collapse accordion>
            <el-collapse-item>
              <template slot="title">
                标签 <i class="header-icon el-icon-info"></i>
              </template>
              <div>
                <el-row :gutter="24">
                  <el-col :span="2" v-for="(item,index) in tagsList" :key="index">
                    <el-link :href="tagsLink+item.tagsName" class="tagsFont" type="warning"
                             v-text="item.tagsName"></el-link>
                  </el-col>
                </el-row>
              </div>
            </el-collapse-item>
          </el-collapse>

        </el-card>

      </div>
      <h1>博客首页</h1>
      <div>
        <el-form>
          <el-form-item>
            <el-input v-model="searchText"></el-input>
            <el-button @click="search()" type="success">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="animate__animated animate__backInRight">
        <el-row :gutter="24">
          <el-card>
            <!--   左侧轮播图   -->
            <el-col :span="10">
              <el-carousel indicator-position="outside">
                <el-carousel-item v-for="(item,index) in this.hos" :key="index">
                  <el-image :src=" item.articleCover" style="width: 100%; cursor:pointer; "
                            @click="getBlogInfoByTitle(item.articleTitle,item.articleUsername,item.articleId)"
                            class="image"></el-image>
                  <h4 style="margin: 0px;  position: absolute; bottom: 0px; left: 5px; color: white">
                    {{ item.articleTitle }}</h4>
                </el-carousel-item>
              </el-carousel>
            </el-col>

            <!--   右侧热点信息   -->

            <el-col :span="14">
              <div class="spot_one">
                热点文章标题
                <!--            特效-->
                <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
                  <li style="padding-bottom: 10px ; cursor:pointer;" v-for="(item,index) in this.hos" :key="index"
                      class="infinite-list-item"
                      @click="getBlogInfoByTitle(item.articleTitle,item.articleUsername,item.articleId)">
                    {{ index + 1 }}.{{ item.articleTitle }}
                  </li>
                </ul>
              </div>
              <div class="spot_two">

                IT圈新闻
                <!--            <ul标签>套<li>标签里写熟悉-->
                <ul class="infinite-list" v-infinite-scroll="load" style="height:293px;overflow:auto;">
                  <li style="padding-bottom: 10px" v-for="(item,index) in news" :key="index"
                      class="infinite-list-item">{{ index + 1 }}. <a :href="item.url">{{ item.title }}</a>
                  </li>
                </ul>
              </div>
            </el-col>
          </el-card>

        </el-row>
      </div>
      <!--关注标签的编剧  加上边距  -->
      <el-container>
        <el-header class="el-height" style="height: 61px;margin:23px -11px 18px -11px">
          <el-tabs v-model="activeName">
            <el-tab-pane :lazy="true" label="关注" name="focus">
              <focus></focus>
            </el-tab-pane>
            <el-tab-pane :lazy="true" label="推荐" name="second">
              <rec></rec>
            </el-tab-pane>
            <el-tab-pane :lazy="true" label="最新" name="third">
              <latest></latest>
            </el-tab-pane>
            <el-tab-pane :lazy="true" label="热榜" name="fourth">
              <hot></hot>
            </el-tab-pane>
          </el-tabs>
        </el-header>

        <router-view></router-view>
      </el-container>

      <el-backtop target="div .home_wrap" :bottom="100">
        <div
          style="{
        height: 100%;
        width: 100%;
        background-color: #f2f5f6;
        box-shadow: 0 0 6px rgba(0,0,0, .12);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
      }"
        >
          UP
        </div>
      </el-backtop>
    </div>
  </div>
</template>

<script>
import {getTagsList} from "../../request/homeRequest";
import {getBlogInfoByTitle, getHotspot, getNews} from "../../request/reqManage";
import Rec from "../panel/Rec";
import Focus from "../panel/Focus";
import latest from "../panel/latest";
import Hot from "../panel/Hot";
import BlogHomeSearch from "./BlogHomeSearch";

export default {
  name: "BlogHome",

  /**
   * Rec 推荐
   * Focus 关注
   * latest 最新
   * Hot 热榜
   */
  components: {
    Rec,
    Focus,
    latest,
    Hot,
    BlogHomeSearch
  },

  data() {
    return {
      activeName: '',
      tagsLink: 'tagsArticle/',
      tagsList: [],
      news: [],
      hos: [],
      num: 15,
      total: 0,
      searchText: '',

    }
  },

  methods: {
    /**
     * 点击搜索
     */
    search() {
      this.$router.push({
        name: '/blogSearch',
        params: {
          searchText: this.searchText,
        }
      })


      console.卡萨丁就卡死啦();
    },
    /**
     * 获取文章信息,按照id
     * @param id 文章id
     */
    getBlogInfoById(id) {
      this.$homeReq.getBlogInfoById(id).then((data) => {
        this.articleInfoById = data.data
        this.getRelated()
      })
    },
    panelRouter(val) {
      this.$router.push(val)
    },
    load() {
      if (this.num < this.total) {
        this.num += 5
        this.getNews()
      }

    },

    getTagsList() {
      this.$homeReq.getTagsList().then(({data}) => {
        this.tagsList = data
      })
    },
    async getNews() {
      this.$mr.getNews(this.num).then((data) => {
        if (data.code === 200) {
          this.news = data.data.newslist
          this.total = data.data.total

        }
      })
    },
    /**
     * IT新闻调用赋值
     * @returns {Pro  mise<void>}
     */
    async getHotspot() {
      this.$mr.getHotspot().then((data) => {
        if (data.code === 200) {
          this.hos = data.data
        }
      })
    },
    /**
     * 点击文章标题跳转文章详情
     * @param title
     * @param username
     */
    getBlogInfoByTitle(title, username, id) {

      this.$router.push({
        path: `/blogInfoById/${id}`,
      })

    },

    /**
     * 自动选中推荐选项卡
     */
    activePanel() {
      setTimeout(() => {
        this.activeName = 'second'
      }, 1000)
    }
  },

  /**
   * 调用赋值
   */
  created() {
    this.getTagsList()
    this.getNews()
    this.getHotspot()

    this.activePanel();
  }
}
</script>

<style scoped>
.content-text {
  display: block;
  height: 50px;
  overflow: hidden;
  color: rgb(147, 147, 147);
  text-overflow: ellipsis;
  white-space: nowrap;
}


.container-inner {
  width: 90%;
  min-height: 150px;

}

.panel-icon {
  margin: 20px 0 0 10px;
  display: inline-block;
}

.panel-fun {
  width: 90%;
  height: 50px;
  /*border: 1px solid #81ff36;*/
  margin: auto;
}

.panel-title {
  width: 90%;
  height: 80px;
  /*border: 1px solid royalblue;*/
  margin: auto;
}

.panel-ul {
  width: 90%;
  height: 30px;
  /*border: 1px solid royalblue;*/
  margin: auto;
}

.panel-ul > li {
  float: left;
  margin-left: 0px;
}

.panel {
  width: 90%;
  min-height: 100px;
  border-radius: 20px;
  margin: 10px auto 10px auto;
}

.container-left {
  width: 65%;
  min-height: 300px;
  /*border: 1px solid rebeccapurple;*/
  float: left;
}

/**
  关注推荐基本布局
 */
.container-right {
  width: 30%;
  min-height: 300px;
  border: 1px solid rebeccapurple;
  float: right;
  border-radius: 20px;

}

/*
标签下的css特效去掉li自带的换行，加间距
*/
.ul > li {
  float: left;
  margin-left: 15px;
}

/*
li标签里名为的link都加间距
 */
.link {
  font-size: 20px;
}

.spot_one {
  width: 45%;
  height: 330px;
  border: 1px solid palegreen;
  float: left;

}

a {
  text-decoration: none;
}

ul {
  list-style-type: none;
  padding-left: 5px;
  /*height:800px;overflow-y:scroll;*/
  /*height: 293px;*/
  overflow: auto
}

.spot_two {
  width: 45%;
  height: 330px;
  border: 1px solid rgba(152, 168, 251, 0.51);
  float: right;
}

.home_wrap {
  width: 80%;
  height: 150px;
  margin: auto;
  margin-top: 45px;
}

.tagsFont {
  font-family: Arial, 'Times New Roman', 'Microsoft YaHei', SimHei;
  font: bold 20px/0.95em Arial, 'Times New Roman', 'Microsoft YaHei', SimHei;
}

.head_tags {
  width: 100%;
  height: 150px;
}

.el-header {
  /*background-color: #B3C0D1;*/
  color: #333;
}

.infinite-list-item:hover {
  color: #00f2fe;
}


.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>
